<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <router-link :to="{ name: 'users' }">UsersA</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'usersb',params:{id:1000} }">UsersB</router-link>
      </li>
      <li>
        <!-- <router-link :to="{ name: 'usersc' }">UsersC</router-link> -->
        <router-link to="/c/100">UsersC</router-link>
        <!-- <router-link to="/a/b/c/d">UsersC</router-link> -->
      </li>
    </ul>

    <router-view></router-view>
    <router-view name="a"></router-view>
  </div>
</template>
<script>
export default {

}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>